import 'package:flutter/material.dart';
import 'dart:math';

class ArcProgress extends StatelessWidget {
  final double percent;
  final double width;
  final Color color;
  final Color bgColor;

  const ArcProgress(
      {Key key, this.percent, this.width, this.color, this.bgColor})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: _ArcPainter(
        percent: percent,
        width: width,
        bgColor: bgColor,
        color: color,
      ),
    );
  }
}

class _ArcPainter extends CustomPainter {
  final double percent;
  final double width; //圈圈宽度
  final Color color;
  final Color bgColor;

  _ArcPainter({this.percent, this.width, this.color, this.bgColor});

  @override
  void paint(Canvas canvas, Size size) {
    // 前面两个参数是偏移，后面是宽高， 为了让里面的圈圈不出来所以最外面的宽度前面移动一圈圈宽度的一半，为什么是一半
    // 因为 线是有两个width的重合形成的一个width 后面·也是为了让出位置
    final rect = Rect.fromLTWH(
        width / 2, width / 2, size.width - width, size.height - width);
    // 背景
    //背景
    if (bgColor != null) {
      //path
      final path = Path();
      path.arcTo(rect, -90 * pi / 180, 359.999 * pi / 180, true);

      //paint
      final paint = Paint();
      paint.style = PaintingStyle.stroke;
      paint.strokeWidth = width;
      paint.color = bgColor;

      canvas.drawPath(path, paint);
    }

    // 前景
    // path
    final path = Path();
    // -90*pi/180这个角度是我们平时看到的起点  最后true和false针对多个线段时是否连接 （这里用不到）
    path.arcTo(rect, -90 * pi / 180, percent * 359.99 * pi / 180, true);
    //paint  -用来设置是否 填充 颜色 以及宽度 相关的
    final paint = Paint();
    paint.style = PaintingStyle.stroke;
    paint.strokeWidth = width;
    paint.color = color;
    paint.strokeCap = StrokeCap.round;
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(_ArcPainter oldDelegate) {
    return oldDelegate.percent != percent;
  }
}
